<style lang="scss">
.avatar {
  &-container {
    padding-top: 90px;
  }
  &-area {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 2px solid #e3e3e3;
    border-radius: 50%;
    padding: 4px;
    background: #fff;
    position: relative;
    z-index: 4;
    cursor: pointer;
    &-bg {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

}
</style>
<template>
  <div class="avatar-area">
    <div class="avatar-area-bg" v-on:click="showModifyAvatar">
      <tooltip effect="scale" placement="bottom" content="点击修改头像">
        <img v-bind:src="avatar">
      </tooltip>
    </div>
  </div>
</template>
<script>
/**
 * @author guocailee
 */
export default {
  name: 'avatar',
  vuex: {
    getters: {
      avatar: ({ info }) => info.base.headPortrait
    }
  },
  methods: {
    showModifyAvatar() {
      this.$dispatch('showModifyAvatar')
    }
  }
}
</script>